<template>
  <div class="noMoney">
    <div class="noMoneyWrap">
      <h2>余额不足
        <i @click="closeNoMoney" class="el-icon-close"></i>
      </h2>
      <p>抱歉，您的余额不足，
        <!-- 欠
        <strong>{{ money }}</strong>
        元,  -->
        请先去充值
      </p>
      <div class="chargeBox">
        <RechargeBase></RechargeBase>
      </div>
      <div class="footer">
        <b class="button-w" @click="closeNoMoney">我已充值</b>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import RechargeBase from '../../stageNav/money/base/rechargeBase'
export default {
  name: 'noMoney',
  components: {
    RechargeBase
  },
  props: {
    money: {
      type: Number
    }
  },
  data () {
    return {
      show: true
    }
  },
  methods: {
    closeNoMoney () {
      this.$emit('closeNoMoney')
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.noMoney
  position fixed
  top 0
  left 0
  width 100%
  height 100%
  z-index 13
  background rgba(0, 0, 0, 0.6)
  overflow auto
  .noMoneyWrap
    position absolute
    top 5vh
    left 0
    right 0
    margin 0 auto
    width 900px
    background #ffffff
    border-radius 4px
    padding-bottom 30px
    h2
      display flex
      justify-content space-between
      padding 20px 30px
      border-bottom 1px solid #999999
      font-size 20px
      line-height 28px
      i
        cursor pointer
    p
      text-align center
      font-size 20px
      font-weight bold
      line-height 28px
      margin-top 30px
      strong
        color #ff0437
    .chargeBox
      margin 20px
    .footer
      text-align center
      margin-top 36px
</style>
